<template>
  <div class="performance-title"></div>
  <div class="performance-nav">
      <div class="item " :class="navStatus===0?'active':''" @click="navStatusChange(0)">
          <p class="til">经营风险</p>
          <p class="co setColor">234件</p>
      </div>
      <div class="item" :class="navStatus===1?'active':''" @click="navStatusChange(1)">
          <p class="til">日常投诉</p>
          <p class="co setColor">334件</p>
      </div>
      <div class="item" :class="navStatus===2?'active':''" @click="navStatusChange(2)">
          <p class="til">应急保障</p>
          <p class="co setColor">15件</p>
      </div>
  </div>
  <!-- 经营风险 -->
  <div v-show="navStatus===0">
    <div class="morebox">
    <div class="moreleft">
      <div class="item" :class="secondNav===item.type?'chose':''" v-for="item in secondList" :key="item.type" @click="secondNavChange(item.type)">{{item.name}}</div>
    </div>
    <div class="moreright" @click="store.changeshowevent">更多</div>
  </div>
    <div class="performance-title1">
        <div class="tl1">类别</div>
        <div class="tl1">麻将馆名称</div>
        <div class="tl4">位置</div>
        <div class="tl5">时间</div>
        <div class="tl3">处置单位</div>
        <div class="tl2">处置状态</div>
    </div>
    <div class="performance-content" >
        <div class="item" v-for="(item,index) in newArr1" :key="index">
            <div class="tl1">{{ item.name }}</div>
            <div class="tl1">{{ item.ts1 }}</div>
            <div class="tl4">{{ item.ts2 }}</div>
            <div class="tl5">{{ item.ts3 }}</div>
            <div class="tl3">{{ item.ts4 }}</div>
            <div class="tl2">{{ item.ts5 }}</div>
        </div>
    </div>
  </div>
  <!-- 日常投诉 -->
  <div v-show="navStatus===1">
    <div class="morebox">
    <div class="moreleft">
      <div class="item" :class="threeNav===item.type?'chose':''" v-for="item in threeList" :key="item.type" @click="threeNavChange(item.type)">{{item.name}}</div>
    </div>
    <div class="moreright">更多</div>
  </div>
    <div class="performance-title1">
        <div class="tl1">类别</div>
        <div class="tl1">麻将馆名称</div>
        <div class="tl4">位置</div>
        <div class="tl5">时间</div>
        <div class="tl3">处置单位</div>
        <div class="tl2">处置状态</div>
    </div>
    <div class="performance-content" >
        <div class="item" v-for="(item,index) in newArr2" :key="index">
            <div class="tl1">{{ item.name }}</div>
            <div class="tl1">{{ item.ts1 }}</div>
            <div class="tl4">{{ item.ts2 }}</div>
            <div class="tl5">{{ item.ts3 }}</div>
            <div class="tl3">{{ item.ts4 }}</div>
            <div class="tl2">{{ item.ts5 }}</div>
        </div>
    </div>
  </div>
  <!-- 应急保障 -->
  <div v-show="navStatus===2">
    <div class="morebox">
    <div class="moreleft">
      <div class="item" :class="fourNav===item.type?'chose':''" v-for="item in fourList" :key="item.type" @click="fouravChange(item.type)">{{item.name}}</div>
    </div>
    <div class="moreright">更多</div>
  </div>
    <div class="performance-title1">
        <div class="tl7">事件名称</div>
        <div class="tl5">时间</div>
        <div class="tl8">协助单位</div>
        <div class="tl6">处置状态</div>
    </div>
    <div class="performance-content" >
        <div class="item" v-for="(item,index) in newArr3" :key="index">
            <div class="tl7">{{ item.ts1 }}</div>
            <div class="tl5">{{ item.ts2 }}</div>
            <div class="tl8">{{ item.ts3 }}</div>
            <div class="tl6">{{ item.ts4 }}</div>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/mahjong'
const store = useCounterStore()
import { ref,reactive } from 'vue';
let list1 = [
  {name:'无证经营',ts1:'小美麻将馆',ts2:'小龙坎街道',ts3:'2025.03.19 16:08',ts4:'工商行政管理部门',ts5:'处置中',type:1},
  {name:'住改商',ts1:'开心麻将馆',ts2:'双碑街道',ts3:'2025.03.18 13:08',ts4:'住建局和规划局',ts5:'已办结',type:2},
  {name:'违规取电',ts1:'居民楼麻将馆',ts2:'天星桥街道',ts3:'2025.03.08 11:28',ts4:'城市管理局',ts5:'处置中',type:1},
  {name:'违规用气',ts1:'心仪麻将馆',ts2:'歌乐山街道',ts3:'2025.02.01 16:32',ts4:'城市管理局',ts5:'已办结',type:2},
  {name:'过期消防设备',ts1:'平价麻将馆',ts2:'沙坪坝街道',ts3:'2025.01.08 16:08',ts4:'城市管理局',ts5:'处置中',type:1},
  {name:'无证经营',ts1:'小美麻将馆',ts2:'小龙坎街道',ts3:'2025.03.19 16:08',ts4:'工商行政管理部门',ts5:'处置中',type:1},
  {name:'住改商',ts1:'开心麻将馆',ts2:'双碑街道',ts3:'2025.03.18 13:08',ts4:'住建局和规划局',ts5:'已办结',type:2},
  {name:'违规取电',ts1:'居民楼麻将馆',ts2:'天星桥街道',ts3:'2025.03.08 11:28',ts4:'城市管理局',ts5:'处置中',type:1},
  {name:'违规用气',ts1:'心仪麻将馆',ts2:'歌乐山街道',ts3:'2025.02.01 16:32',ts4:'城市管理局',ts5:'已办结',type:2},
  {name:'过期消防设备',ts1:'平价麻将馆',ts2:'沙坪坝街道',ts3:'2025.01.08 16:08',ts4:'城市管理局',ts5:'处置中',type:1},
]
let list2 = [
  {name:'聚众赌博',ts1:'居民楼麻将馆',ts2:'石井坡街道',ts3:'2025.03.09 16:08',ts4:'公安',ts5:'处置中',type:1},
  {name:'打架斗殴',ts1:'新意麻将馆',ts2:'西永街道',ts3:'2025.03.08 13:08',ts4:'公安',ts5:'已办结',type:2},
  {name:'矛盾纠纷',ts1:'来财麻将馆',ts2:'香炉山街道',ts3:'2025.03.08 11:28',ts4:'公安',ts5:'处置中',type:1},
  {name:'吸毒',ts1:'宏图麻将馆',ts2:'青木关镇',ts3:'2025.02.01 16:32',ts4:'公安',ts5:'已办结',type:2},
  {name:'扰民',ts1:'一帆风顺麻将馆',ts2:'小龙坎街道',ts3:'2025.01.08 16:08',ts4:'公安',ts5:'处置中',type:1},
  {name:'聚众赌博',ts1:'居民楼麻将馆',ts2:'石井坡街道',ts3:'2025.03.09 16:08',ts4:'公安',ts5:'处置中',type:1},
  {name:'打架斗殴',ts1:'新意麻将馆',ts2:'西永街道',ts3:'2025.03.08 13:08',ts4:'公安',ts5:'已办结',type:2},
]
let list3 = [
  {ts1:'重大巡查会',ts2:'2024.06.08 16:08',ts3:'公安、教委',ts4:'已办结',type:2},
  {ts1:'重大巡查会',ts2:'2024.06.08 16:08',ts3:'公安、教委',ts4:'已办结',type:2},
  {ts1:'重大巡查会',ts2:'2024.06.08 16:08',ts3:'公安、教委',ts4:'处置中',type:1},
  {ts1:'重大巡查会',ts2:'2024.06.08 16:08',ts3:'公安、教委',ts4:'已办结',type:2},
  {ts1:'重大巡查会',ts2:'2024.06.08 16:08',ts3:'公安、教委',ts4:'处置中',type:1},
  {ts1:'重大巡查会',ts2:'2024.06.08 16:08',ts3:'公安、教委',ts4:'已办结',type:2},
  {ts1:'重大巡查会',ts2:'2024.06.08 16:08',ts3:'公安、教委',ts4:'处置中',type:1},
  {ts1:'重大巡查会',ts2:'2024.06.08 16:08',ts3:'公安、教委',ts4:'已办结',type:2},
]

let navStatus = ref(0)
function navStatusChange(type:number) {
  navStatus.value = type
}

// 处理经营风险内容
let secondNav = ref(0)
let secondList = ref([
  {name:'全部',type:0},
  {name:'处置中 120件',type:1},
  {name:'已办结 114件',type:2},
])
let newArr1 = ref([] as any);
newArr1.value = list1;
function secondNavChange(type:number) {
  secondNav.value=type
  newArr1.value = list1.filter((item:any) =>{
      if(type===0){
          return item
      }
      return item.type === type
  } )
}
// 处理日常投诉内容
let threeNav = ref(0)
let threeList = ref([
  {name:'全部',type:0},
  {name:'处置中 231件',type:1},
  {name:'已办结 103件',type:2},
])
let newArr2 = ref([] as any);
newArr2.value = list2;
function threeNavChange(type:number) {
  threeNav.value=type
  newArr2.value = list2.filter((item:any) =>{
      if(type===0){
          return item
      }
      return item.type === type
  } )
}
// 处理应急保障内容
let fourNav = ref(0)
let fourList = ref([
  {name:'全部',type:0},
  {name:'处置中 3件',type:1},
  {name:'已办结 12件',type:2},
])
let newArr3 = ref([] as any);
newArr3.value = list3;
function fouravChange(type:number) {
  fourNav.value=type
  newArr3.value = list3.filter((item:any) =>{
      if(type===0){
          return item
      }
      return item.type === type
  } )
}
</script>

<style lang="less" scoped>
.performance-title{
  width: 100%;
  height: 44px;
  margin: 0 0 12px 0;
  background-image: url("../../../assets/mahjong/icon39.png");
  background-size: 100% 100%;
}
.performance-nav{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .active{
      width: 175px !important;
      background-image: url("../../../assets/icon20.png") !important;
  }
  .item{
      width: 175px;
      height: 68px;
      background-image: url("../../../assets/icon19.png");
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 0 15px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      cursor: pointer;
      .til{
          width: 100%;
          font-family: PingFangSC-SNaNpxibold;
          font-weight: 600;
          font-size: 14px;
          color: #FFFFFF;
          text-align: center;
      }
      .co{
          width: 100%;
          font-family: PingFangSC-SNaNpxibold;
          font-weight: 600;
          font-size: 15px;
          text-align: center;
      }
  }
}
.morebox{
  width: 100%;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .moreleft{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item{
      width: 160px;
      height: 32px;
      background-image: url("../../../assets/mahjong/icon40.png");
      background-size: 100% 100%;
      line-height: 32px;
      text-align: center;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
    }
    .chose{
      background-image: url("../../../assets/mahjong/icon41.png") !important;
      color: white !important;;
    }
  }
  .moreright{
    font-size: 14px;
    color: #159AFF;
    margin-left: 21px;
    cursor: pointer;
  }
}
.performance-title1{
  width: 100%;
  height: 28px;
  background: rgba(2, 49, 100, .2);
  margin-top: 12px;
  box-sizing: border-box;
  padding: 0 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #159AFF;
  .tl1{
          width: 85px;
      }
      .tl2{
          width: 57px;
      }
      .tl3{
          width: 100px;
      }
      .tl4{
          width: 95px;
      }
      .tl5{
          flex: 1;
      }
      .tl6{
          width: 72px;
      }
      .tl7{
          width: 123px;
      }
      .tl8{
          width: 146px;
      }
}
/* 隐藏滚动条轨道 */
.performance-content::-webkit-scrollbar {
  display: none; /* 对于Chrome和Safari */
}
.performance-content{
  width: 100%;
  height: 284px;
  overflow-y: scroll;
  .item{
      width: 100%;
      height: 44px;
      margin-bottom: 4px;
      font-family: PingFangSC-SNaNpxibold;
      font-weight: 600;
      font-size: 12px;
      color: #D0DEEE;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 0 0 6px;
      .tl1{
          width: 85px;
      }
      .tl2{
          width: 57px;
      }
      .tl3{
          width: 100px;
      }
      .tl4{
          width: 95px;
      }
      .tl5{
          flex: 1;
      }
      .tl6{
          width: 72px;
      }
      .tl7{
          width: 123px;
      }
      .tl8{
          width: 146px;
      }
  }
  .item:nth-child(odd){
      background: rgba(71, 138, 138, 0);
      box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
  }
  .item:nth-child(even){
      background: rgba(71, 107, 138, 0.1);
      box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
  }
}
</style>
